<template>
  <div>
    <div class="tou">
       <div class="xiao">
        <div class="zuo" @click="$router.back()">
          <van-icon name="arrow-left" />
        </div>
        <div class="you">
          城市列表
        </div>
       </div>
    </div>
    <van-index-bar v-for="item in list" :key="item.value" >
  <van-index-anchor :index="item.short[0]" />
  <van-cell :title="item.label" />
</van-index-bar>
  </div>
</template>

<script>

export default {
  name: 'HaokeCities',

  data() {
    return {
      indexList: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
      list:[]
    };
  },
  created(){
    this.getList()
    console.log(this.$router);
  },
  mounted() {
    
  },

  methods: {
    async getList(){
      const level = 1
      console.log(level);
      const res = await this.$http.get(`/area/city?level=1`)
      this.list = res.data.body
    }
  },
};
</script>

<style lang="less" scoped>
.tou {
.xiao {
  // position: relative;
  width: 100%;
  height: 50px;
  line-height: 50px;
  background-color: #21b97a;
  text-align: center;
  color: #fff;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  .zuo {
    float: left;
    position: relative;
    left: -120px;
    // background-color: #21b97a;
  }
  .you {
    position: relative;
    left: -7px;
  }
}
}
</style>